<script setup lang="ts">
import { computed, onMounted, onUnmounted, PropType, ref, watchEffect } from 'vue'
import echarts, { ECOption } from './config'
import { TScoreData } from '../../Types/echarts'

const chartRef = ref<HTMLElement | null>(null)
let myChart: echarts.ECharts

const props = defineProps({
	width: {
		type: String,
		default: '100%' // 默认值
	},
	height: {
		type: String,
		default: '100%'
	},
	yAxisData: {
		type: Array as PropType<string[]>,
		default: () => ['交通学院', '软件学院', '技工学院', '管理学院']
	},
	xAxisData: {
		type: Array as PropType<string[]>,
		default: () => []
	},
	seriesData: {
		type: Array as PropType<{ name: string; data: number[] }[]>,
		default: () => []
	},
	data: {
		type: Object as PropType<TScoreData>
	}
})
// console.log(props)

// 定义配置对象
const barOption = computed((): ECOption => {
	// 如果有自定义的seriesData，则使用自定义数据
	if (props.seriesData && props.seriesData.length > 0) {
		// 检查是否有违规率/及格率/优秀率数据
		const hasStatsData = props.seriesData.some((item) =>
			['违规率', '及格率', '优秀率'].includes(item.name)
		)

		// 如果是统计数据，使用横向条形图
		if (hasStatsData) {
			return {
				title: {
					text: '班级考试统计'
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					},
					formatter: function (params: any) {
						return (
							params[0].name +
							'<br/>' +
							params
								.map((item: any) => {
									return item.seriesName + ': ' + item.value + '%'
								})
								.join('<br/>')
						)
					}
				},
				legend: {
					data: props.seriesData.map((item) => item.name)
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'value',
					boundaryGap: [0, 0.01],
					axisLabel: {
						formatter: '{value}%'
					},
					max: 100 // 设置最大值为100%
				},
				yAxis: {
					type: 'category',
					data: props.yAxisData
				},
				series: props.seriesData.map((item) => ({
					name: item.name,
					type: 'bar',
					data: item.data,
					itemStyle: {
						color:
							item.name === '违规率'
								? '#FF4D4F' // 红色
								: item.name === '及格率'
									? '#FAAD14' // 橙色
									: item.name === '优秀率'
										? '#52C41A' // 绿色
										: '#5470c6' // 默认蓝色
					}
				}))
			}
		}

		// 否则使用垂直柱状图（班级成绩数据）
		return {
			title: {
				text: '班级成绩分析'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: props.seriesData.map((item) => item.name)
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'category',
				data: props.yAxisData
			},
			yAxis: {
				type: 'value',
				name: '分数'
			},
			series: props.seriesData.map((item) => ({
				name: item.name,
				type: 'bar',
				data: item.data,
				itemStyle: {
					color:
						item.name === '理论成绩'
							? '#5470c6'
							: item.name === '实践成绩'
								? '#91cc75'
								: item.name === '总分'
									? '#fac858'
									: '#ee6666'
				}
			}))
		}
	}

	// 否则使用默认横向图表
	return {
		title: {
			text: '考试总结'
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			formatter: function (params: any) {
				return (
					params[0].name +
					'<br/>' +
					params
						.map((item: any) => {
							return item.seriesName + ': ' + item.value + '%'
						})
						.join('<br/>')
				)
			}
		},
		legend: {},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		xAxis: {
			type: 'value',
			boundaryGap: [0, 0.01],
			axisLabel: {
				formatter: '{value}%'
			},
			max: 100 // 设置最大值为100%
		},
		yAxis: {
			type: 'category',
			data: props.yAxisData
		},
		series: [
			{
				name: '违规率',
				type: 'bar',
				data: [15.2, 12.5, 18.0, 10.0],
				itemStyle: {
					color: '#FF4D4F' // 红色
				}
			},
			{
				name: '及格率',
				type: 'bar',
				data: [85.3, 88.4, 82.0, 70.0],
				itemStyle: {
					color: '#FAAD14' // 橙色
				}
			},
			{
				name: '优秀率',
				type: 'bar',
				data: [35.6, 42.1, 28.5, 30.0],
				itemStyle: {
					color: '#52C41A' // 绿色
				}
			}
		]
	}
})

// console.log(barOption)
// 定义配置对象
const echartsStyle = {
	width: props.width,
	height: props.height,
	option: barOption
}
// console.log(echartsStyle)

function barFun() {
	// 基于准备好的dom，初始化echarts实例
	myChart = echarts.init(chartRef.value)
	// 使用刚指定的配置项options和数据显示图表myChart。
	// myChart.setOption(barOption)
	myChart.setOption(barOption.value)
}

onMounted(() => {
	barFun()

	// 与watch相似
	watchEffect(() => {
		// console.log(props.option)

		myChart.setOption(barOption.value, true) // setOption：option更新后，刷新。true：新的取代旧的
	})
})

// 渲染成功后，销毁
onUnmounted(() => {
	myChart.dispose()
})
</script>

<template>
	<div ref="chartRef" :style="echartsStyle"></div>
</template>

<style scoped>
/*div {*/
/*	box-sizing: border-box;*/
/*	border: 2px solid rgba(161, 154, 154, 0.486);*/
/*}*/
</style>
